<template>
    <view>
        <!-- 抽奖区域 -->
        <view class="width_1 h1 f fac fpc fv">
            <view class="margin-bottom-sm font_w text-xl">积分抽大奖</view>
            <view class="box margin-bottom-sm">
                <view @tap="startDraw" :class="'list ' + (drawIndex > 0 ? 'grey' : '')">立即抽</view>
                <!-- <view w bindtap="startDraw" class="list {{drawIndex > 0 ? 'grey' : ''}}">抽奖</view> -->
                <block v-for="(item, index) in prizeList" :key="index">
                    <view :class="'list ' + (drawIndex == item.index ? 'change_in' : '')">
                        <view class="list_t">
                            <image :src="item.imgsrc" mode="aspectFit"></image>
                        </view>
                        <view class="list_b">{{ item.prizeName }}</view>
                    </view>
                </block>
            </view>
            <button class="again_btn" @tap="againBtn" :disabled="!showAgain" v-if="drawNum">再抽一次 (可用{{ drawNum }}次)</button>
        </view>
        <!--  -->

        <!-- 奖品弹窗 -->
        <view class="luck-display" v-if="isShowLuck">
            <view class="luck-mask" @tap="closePopup"></view>
            <view class="luck-popup">
                <view class="luck-close" @tap="closePopup">
                    <i class="iconfont icon-shanchu"></i>
                </view>
                <view class="luck-image">
                    <image :src="awardImage" mode="aspectFit"></image>
                </view>
                <view class="luck-text">{{ awardName }}</view>
            </view>
        </view>
    </view>
</template>

<script>
let loopTimer;
let timer;
let onDrawing = false; // 是否可进行抽奖标识，默认为false可进行抽奖
let drawIndex = 0; //抽奖过程KEY

export default {
    data() {
        return {
            // 奖品参数信息
            prizeList: [
                {
                    id: '001',
                    index: 1,
                    imgsrc: 'https://hbimg.huabanimg.com/18b925338313c77ee90c6a0a2f052a7988e10ce515ca7-T4bMZ0_fw658',
                    prizeName: '谢谢参与'
                },
                {
                    id: '002',
                    index: 2,
                    imgsrc: 'https://hbimg.huabanimg.com/2fe60709c9479b41ec3eef7fff1101f683b4ad89254af-HNdtDR_fw658',
                    prizeName: '积分 x20'
                },
                {
                    id: '003',
                    index: 3,
                    imgsrc: 'https://hbimg.huabanimg.com/2fe60709c9479b41ec3eef7fff1101f683b4ad89254af-HNdtDR_fw658',
                    prizeName: '积分 x20'
                },
                {
                    id: '004',
                    index: 4,
                    imgsrc: 'https://hbimg.huabanimg.com/96e0a27d3a6b25dacd7157db6879b63be9e1addd126ac-sMVvOt_fw658',
                    prizeName: '神秘礼盒 x1'
                },
                {
                    id: '005',
                    index: 5,
                    imgsrc: 'https://img95.699pic.com/element/40052/6002.png_300.png',
                    prizeName: '折扣券 x1'
                },
                {
                    id: '006',
                    index: 6,
                    imgsrc: 'https://hbimg.huabanimg.com/2fe60709c9479b41ec3eef7fff1101f683b4ad89254af-HNdtDR_fw658',
                    prizeName: '积分 x10'
                },
                {
                    id: '007',
                    index: 7,
                    imgsrc: 'https://hbimg.huabanimg.com/96e0a27d3a6b25dacd7157db6879b63be9e1addd126ac-sMVvOt_fw658',
                    prizeName: '神秘礼盒 x1'
                },
                {
                    id: '008',
                    index: 8,
                    imgsrc: 'https://img95.699pic.com/element/40052/6002.png_300.png',
                    prizeName: '折扣券 x1'
                }
            ],
            drawNum: 2,
            drawIndex: null,
            //抽奖过程KEY
            prizeResult: null,
            //抽奖结果KEY
            prizeName: null,
            //抽奖结果KEY对应的奖品名称
            isShowLuck: false,
            // 是否显示奖品弹窗，默认false不显示
            showAgain: false,
            //是否抽奖后显示再抽一次按钮
            awardImage: '',
            // 弹窗展示的奖品照片
            awardName: '' // 弹窗展示的奖品名字
        };
    },
    /**
     * 组件的属性列表
     */
    props: {},
    /**
     * 关闭组件样式隔离
     */
    options: {
        styleIsolation: 'apply-shared'
    },
    /**
     * 组件的方法列表
     */
    methods: {
        //抽奖操作
        startDraw() {
            if (onDrawing) {
                return;
            } else {
                onDrawing = true;
            }
            clearInterval(loopTimer);
            clearTimeout(timer);
            loopTimer = setInterval(() => {
                this.changePrize();
            }, 100);

            // 随机将品池
            let random = Math.floor(Math.random() * this.prizeList.length);
            let res = {
                stutus: 1,
                prizeResult: this.prizeList[random].index,
                prizeName: this.prizeList[random].prizeName
            };
            if (res.stutus == 1) {
                timer = setTimeout(() => {
                    clearInterval(loopTimer);
                    loopTimer = setInterval(() => {
                        this.changePrize();
                    }, 200);
                    timer = setTimeout(() => {
                        clearInterval(loopTimer);
                        loopTimer = setInterval(() => {
                            this.changePrize();
                        }, 200);
                        timer = setTimeout(() => {
                            clearInterval(loopTimer);
                            loopTimer = setInterval(() => {
                                this.changePrize();
                            }, 300);
                            timer = setTimeout(() => {
                                this.setData({
                                    prizeResult: res.prizeResult,
                                    prizeName: res.prizeName
                                });
                            }, 1200);
                        }, 1400);
                    }, 1500);
                }, 1600);
            }
        },
        //抽奖过程奖品切换
        changePrize() {
            drawIndex++;
            drawIndex = drawIndex > 8 ? 1 : drawIndex;
            this.setData({
                drawIndex: drawIndex
            });
            if (this.prizeResult == drawIndex) {
                clearInterval(loopTimer);
                clearTimeout(timer);
                let currentAward = this.prizeList[this.prizeResult - 1];
                this.setData({
                    showAgain: true,
                    isShowLuck: true,
                    awardImage: currentAward.imgsrc,
                    awardName: currentAward.prizeName
                });
            }
        },
        //点击再抽一次按钮
        againBtn() {
            onDrawing = false;
            drawIndex = 0; //抽奖过程KEY
            this.drawNum--;
            this.setData({
                drawIndex: null,
                // 清空抽奖过程KEY
                prizeResult: null,
                // 清空抽奖结果KEY
                prizeName: null,
                // 清空抽奖结果KEY对应的奖品名称
                showAgain: false,
                // 是否抽奖后显示再抽一次按钮
                awardImage: '',
                // 清空奖品展示的图片
                awardName: '',
                // 清空奖品的展示名称
                drawNum: this.drawNum
            });
        },
        // 关闭奖品弹簧
        closePopup() {
            this.setData({
                isShowLuck: false
            });
        }
    },
    created: function () {}
};
</script>
<style>
@import './index.css';
</style>
